<template>
  <div class="dashboard-container">
    <div class="app-container">
      <b>标签管理</b>
    </div>
    <el-row>
      <el-button @click="handleGain('add')">新建标签</el-button>
      <el-button @click="handleGetback">返回学科</el-button>
    </el-row>
    <br />
    <el-form :model="requestParameters" ref="requestParameters">
    <el-form-item label="标签名称" prop="tagName">
    <el-input
      placeholder="请输入"
      @keyup.enter="handleFilter"
      v-model="requestParameters.tagName"
      clear="filter-item"
      style="width: 400px">
    </el-input>
    </el-form-item>
    <el-form-item label="操作：">
    <el-button
    size="small"
    type="primary"
    icon="el-icon-search"
    @click="handleFilter">
    搜索</el-button>
    </el-form-item>
    </el-form>
    <br />
    <br />
    <!-- 数据列表 -->
    <template>
      <el-table :data="tagsData" border style="width: 99%" :key="tablekey">
        <el-table-column align="center" label="序号" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签名称">
          <template slot-scope="scope">
            <span>{{scope.row.tagName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建者" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.creator}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.addDate}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="面试题数量" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.totals}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleGain(scope.row.id)">修改</el-button>
            <el-button type="success" size="mini" @click="handleStatus(scope.row)">
              <span v-if="scope.row.state==0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button
              v-if="scope.row.status!='deleted'"
              size="mini"
              type="danger"
              @click="removeUser(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <br />
    <div class="pages">
      <el-pagination
        background
        style="margin-left: 60%"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(requestParameters.page)"
        :total="Number(total)"
        :page-size="Number(requestParameters.pagesize)"
        :page-sizes="[10,20,30, 40]"
        layout=" prev, pager, next, sizes, jumper"
      ></el-pagination>
    </div>
    <br />
    <br />
    <Dialog ref="editUser" :titleInfo="titleInfo" :formBase="formData" v-on:newDataes="getList"></Dialog>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, add, removeState, remove, detail } from '@/api/hmmm/tags.js'
import Dialog from './../components/tags-add'
export default {
  name: 'TagsList',
  components: {
    Dialog
  },
  data() {
    return {
      tablekey: 0,
      tagsData: [],
      total: null,
      titleInfo: {
        pageTitle: '标签',
        text: ''
      },
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      formData: {
        tagName: '',
        subjectID: ''
      }
    }
  },
  computed: {
    status() {
      return status
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 初始数据
    initialDate() {
      this.getList()
    },
    // 获取列表
    async getList(params) {
      const { data: res } = await list(this.requestParameters)
      console.log(res)
      this.tagsData = res.items
      this.total = res.counts
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 显示信息数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入每一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },
    query() {
      this.formData = {}
    },
    handleGain(id) {
      this.query()
      this.$refs.editUser.dialogFormV()
      if (id === 'add') {
        this.titleInfo.test = '创建'
      } else {
        this.titleInfo.text = '编辑'
        this.handleEditForm(id)
      }
    },
    // 修改
    async handleEditForm(objeditId) {
      this.formData.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      this.formData = res
    },
    // 返回学科
    handleGetback() {
      this.$router.push({ name: 'subjects-list' })
    },
    // 删除
    removeUser(user) {
      this.$confirm('确定要删除吗' + ',是否继续', '提示', 
      {
        type: 'warning'
      }).then(async () => {
        await remove({ id: user })
        .then(response => {
          this.$message.success('已成功删除')
          this.tagsData.splice(user, 1)
          this.getList(this.requestParameters)
        })
        .catch(response => {
          this.$message.error('删除失败')
        })
      })
      .catch(() => {
        this.$message.info('已取消')
      })
    },
    // 启用/禁用
    handleStatus(val) {
      var status = ''
      if (val.state === true) {
        val.state = 0
        status = '禁用'
      } else {
        val.state = 1
        status = '启用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      this.$confirm('已成功' + status + ',是否继续？', '提示', {
        type: 'warning'
      })
      .then(async () => {
        await removeState(data)
        .then(response => {
          this.$message.success('成功' + status + '!')
          this.getList(this.requestParameters)
        })
        .catch(response => {
          this.$message.error(status + '失败')
        })
      })
    },
    mounted: function() {},
    created() {
      var that = this
      this.initialDate()
      // 回车操作
      document.onkeydown = function(e) {
        var key = window.event.keyCode
        if (key === 13) {
          console.log(123)
          that.handleFilter(this.requestParameters)
        }
      }
    }
  }
}
</script>
<style scoped>
</style>
